<template>
    <div class="container">
        <a-card title="库存管理">
            <a-tabs type="card" :default-active-key="0" @change="changeTab">
                <a-tab-pane v-for="(item,i) in tabsData" :key="item.name" :tab="item.name">
                    <div class="tool-bar">
                        <div>
                            <a-input-search allowClear style="width: 200px;color: #05b089" v-model="varietyName" placeholder=""
                                @search="getTableData('')" placeholder="关键字搜索"></a-input-search>
                            <a-button type="default" @click="varietyName = ''">重置</a-button>
                            <a-select style="width: 200px;margin-left: 10px" v-model="searchWarehouse.id" @change="handleChange"
                                allowClear placeholder="选择仓库">
                                <a-select-option v-for="item in warehouseList" :key="item.id"
                                    :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </div>
                        <!--               <div>-->
                        <!--                   <a-button type="primary" @click="add">新增</a-button>-->
                        <!--                   <a-button type="primary" @click="getImportTemplate">下载导入模板</a-button>-->
                        <!--                   <a-upload-->
                        <!--                       name="file"-->
                        <!--                       :multiple="false"-->
                        <!--                       :action="action"-->
                        <!--                       :showUploadList="false"-->
                        <!--                       @change="uploadChange"-->
                        <!--                   >-->
                        <!--                       <a-button type="primary">导入</a-button>-->
                        <!--                   </a-upload>-->
                                           <a-button type="primary" @click="exportData">导出</a-button>
                        <!--               </div>-->
                    </div>
                    <div class="table">
                        <a-table bordered :loading="tableOption.loading" :rowKey="(item,i)=>item.id"
                            :columns="tableOption.columns" :data-source="tableOption.tableData"
                            :pagination="tableOption.pagination">
                            <template slot="enterStorageNum" slot-scope="text, record">
                                <span>{{record.enterStorageNum}}{{record.unit}}</span>
                            </template>
                            <template  slot="residueNum" slot-scope="text, record">
                                <span>{{record.residueNum}}{{record.unit}}</span>
                            </template>
                        </a-table>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-card>

        <a-modal :footer="null" :width="modalOption.width" v-model:visible="modalOption.visible" :title="modalOption.title">
            <div class="info-box">
                <a-descriptions :column="2">
                    <a-descriptions-item label="品名">
                        <span class="bold">{{modalOption.formData.varietyName}}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="物料代码">
                        <span class="bold">{{modalOption.formData.materialCode}}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="拉丁文名">
                        <span class="bold">{{modalOption.formData.basinymLatin}}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="仓库">
                        <span class="bold">{{modalOption.formData.warehouse}}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="剩余数量">
                        <span class="bold">{{modalOption.formData.residueNum}}{{modalOption.formData.unit}}</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="入库数量">
                        <span class="bold">{{modalOption.formData.enterStorageNum}}{{modalOption.formData.unit}}</span>
                    </a-descriptions-item>
                </a-descriptions>
            </div>
            <div class="item-box">
                <h3>使用记录</h3>
                <a-table bordered :loading="modalOption.outPutsRecordTableOption.loading" :rowKey="(item,i)=>item.id"
                    :columns="modalOption.outPutsRecordTableOption.columns"
                    :data-source="modalOption.outPutsRecordTableOption.tableData"></a-table>
            </div>
            <div class="item-box">
                <h3>入库记录</h3>
                <a-table bordered :loading="modalOption.incomingRecordTableOption.loading" :rowKey="(item,i)=>item.id"
                    :columns="modalOption.incomingRecordTableOption.columns"
                    :data-source="modalOption.incomingRecordTableOption.tableData"></a-table>
            </div>
        </a-modal>
    </div>
</template>

<script>
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
import { h } from "vue";
import nextApi from "@/api/nextApi";
import {downLoadFile} from "@/utils";

export default {
    name: "rowMaterialIncoming",
    data() {
        return {
            tabIndex:0,
            varietyName: "",
            searchWarehouse: {id:undefined},
            warehouseList: [],
            action: this.$config.baseURL + "/assetManage/importData",
            tableOption: {
                columns: [
                    {
                        title: "序号",
                        dataIndex: "index",
                        key: "index",
                        align: "center",
                        customRender: (text, record, index) => `${index + 1}`,
                    },
                    {
                        align: "center",
                        dataIndex: "varietyName",
                        key: "varietyName",
                        title: "品名",
                    },
                    {
                        align: "center",
                        dataIndex: "batch",
                        key: "batch",
                        title: "批号",
                    },
                    {
                        align: "center",
                        dataIndex: "warehouse",
                        key: "warehouse",
                        title: "仓库",
                    },
                    {
                        align: "center",
                        dataIndex: "enterStorageNum",
                        key: "enterStorageNum",
                        title: "入库数量",
                        scopedSlots: { customRender: "enterStorageNum" },
                    },
                    {
                        align: "center",
                        dataIndex: "residueNum",
                        key: "residueNum",
                        title: "剩余数量",
                        scopedSlots: { customRender: "residueNum" },
                    },
                    {
                        align: "center",
                        dataIndex: "medicineClass",
                        key: "medicineClass",
                        title: "中药等级",
                        customRender: (text, record, index) => `${record.medicineClass?record.medicineClass:'-'}`,
                    },
                    {
                        align: "center",
                        dataIndex: "action",
                        key: "action",
                        title: "操作",
                        width: 200,
                        customRender: (text, record, index) => {
                            if (!this.$utilCheckPermission(["inventoryManagementDetails"])) return "";
                            return h("div", [
                                h(
                                    "a-button",
                                    {
                                        style: { marginRight: "10px" },
                                        props: { icon: "eye", type: "primary", size: "small" },
                                        on: {
                                            click: () => {
                                                this.detailView(record);
                                            },
                                        },
                                    },
                                    "详情"
                                ),
                            ]);
                        },
                    },
                ],
                loading: false,
                tableData: [],
                pagination: {
                    pageSize: 10,
                    current: 1,
                    total: 0,
                    showTotal: (total) => `共${total}条`,
                    onChange: (page, pageSize) => this.pageChange(page, pageSize),
                },
            },
            modalOption: {
                title: "中药材",
                locale,
                visible: false,
                width: "80%",
                formData: {},
                outPutsRecordTableOption: {
                    columns: [
                        // {
                        //     title: '序号',
                        //     dataIndex: 'index',
                        //     key: 'index',
                        //     align: 'center',
                        //     customRender: (text,record,index) => `${index+1}`,
                        // },
                        {
                            align: "center",
                            dataIndex: "storageTime",
                            key: "storageTime",
                            title: "出库时间",
                        },
                        {
                            align: "center",
                            dataIndex: "storageType",
                            key: "storageType",
                            title: "出库类型",
                        },
                        {
                            align: "center",
                            dataIndex: "storageBatch",
                            key: "storageBatch",
                            title: "出库批号",
                        },
                        {
                            align: "center",
                            dataIndex: "storageNum",
                            key: "storageNum",
                            title: "出库数量",
                            // render: (text, record) => `${record.sendNumber}${record.unit}`,
                        },
                        {
                            align: "center",
                            dataIndex: "operator",
                            key: "operator",
                            title: "操作人",
                        },
                        {
                            align: "center",
                            dataIndex: "realTimeInventory",
                            key: "realTimeInventory",
                            title: "实时库存",
                            // render: (text, record) => `${record.realTimeInventory}${record.unit}`,
                        },
                    ],
                    loading: false,
                    tableData: [],
                },
                incomingRecordTableOption: {
                    columns: [
                        // {
                        //     title: '序号',
                        //     dataIndex: 'index',
                        //     key: 'index',
                        //     align: 'center',
                        //     customRender: (text,record,index) => `${index+1}`,
                        // },
                        {
                            align: "center",
                            dataIndex: "enterTime",
                            key: "enterTime",
                            title: "入库时间",
                        },
                        {
                            align: "center",
                            dataIndex: "enterStorageType",
                            key: "enterStorageType",
                            title: "入库类型",
                            customRender: (text, record) => `${record.enterStorageType == "NSY" ? "非溯源入库" : "溯源入库"}`,
                        },
                        {
                            align: "center",
                            dataIndex: "enterStorageBatch",
                            key: "enterStorageBatch",
                            title: "入库批号",
                            // render: (text,record) => `${record.number}kg`
                        },
                        {
                            align: "center",
                            dataIndex: "enterStorageNum",
                            key: "enterStorageNum",
                            title: "入库数量",
                            render: (text, record) => `${record.enterStorageNum}${record.unit}`,
                        },
                        {
                            align: "center",
                            dataIndex: "operator",
                            key: "operator",
                            title: "操作人",
                        },
                        {
                            align: "center",
                            dataIndex: "realTimeStorage",
                            key: "realTimeStorage",
                            title: "实时库存",
                            render: (text, record) => `${record.realTimeStorage}${record.unit}`,
                        },
                    ],
                    loading: false,
                    tableData: [],
                },
            },
            //tabs数据
            tabsData: [
                { name: "中药材", rawType: "中药材" },
                { name: "辅料", rawType: "辅料" },
                { name: "中药饮片(半成品)", rawType: "中药饮片(半成品)" },
                { name: "直服饮片(半成品)", rawType: "直服饮片(半成品)" },
                { name: "单方饮片(半成品)", rawType: "单方饮片(半成品)" },
                { name: "中药饮片", rawType: "中药饮片" },
                { name: "直服饮片", rawType: "直服饮片" },
                { name: "单方饮片", rawType: "单方饮片" },
            ],
        };
    },
    async mounted() {
        await this.getWarehouseList();
        await this.getTableData();
    },
    methods: {
        //导出
        async exportData() {
            this.downloadLoading = true;
            nextApi.exportInventoryData({type:this.modalOption.title}, (res) => {
                const blob = new Blob([res.data], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                    // type: "application/vnd.ms-excel",
                });
                downLoadFile(blob, this.modalOption.title+"库存管理列表");
                this.downloadLoading = false;
            });
        },
        async getWarehouseList() {
            const res = await nextApi.getWarehouseList({
                state: 1,
            });
            this.warehouseList = res.data || [];
        },
        handleChange(){
            this.getTableData()
        },
        // async exportData(){
        //     const blob = await exportAsset({})
        //     const url = window.URL.createObjectURL(blob)
        //     const link = document.createElement('a')
        //     link.style.display = 'none'
        //     link.href = url
        //     link.setAttribute('download',`资产管理.xlsx`)
        //     document.body.appendChild(link)
        //     link.click()
        //     document.body.removeChild(link)
        //     window.URL.revokeObjectURL(url)
        //     this.$message.success('下载成功')
        // },
        // async getImportTemplate(){
        //     const blob = await getAssetImportTemplate()
        //     const url = window.URL.createObjectURL(blob)
        //     const link = document.createElement('a')
        //     link.style.display = 'none'
        //     link.href = url
        //     link.setAttribute('download',`资产导入模板.xlsx`)
        //     document.body.appendChild(link)
        //     link.click()
        //     document.body.removeChild(link)
        //     window.URL.revokeObjectURL(url)
        //     this.$message.success('下载成功')
        // },
        // uploadChange(file){
        //     console.log(file)
        //     if(file?.file?.response?.data.length){
        //         this.$message.success(file?.file?.response?.msg)
        //         this.getTableData()
        //     }
        // },
        async changeTab(key) {
            this.modalOption.title = key;
            if(key === "中药饮片" || key === "直服饮片" || key === "单方饮片"){
                if(this.tableOption.columns[2].title === "装量") {
                    await this.getTableData();
                    return
                }
                this.tableOption.columns.splice(2,0,{
                    align: "center",
                    dataIndex: "discretion",
                    key: "discretion",
                    title: "装量",
                })
            }else{
                if(this.tableOption.columns[2].title === "批号") {
                    await this.getTableData();
                    return
                }
                this.tableOption.columns.splice(2,1)
            }
            await this.getTableData();

        },
        async getTableData(id) {
            this.tableOption.loading = true;
            let params = {
                pageNum: this.tableOption.pagination.current,
                pageSize: this.tableOption.pagination.pageSize,
                varietyName: this.varietyName,
                type: this.modalOption.title,
                id,
                warehouseId: this.searchWarehouse.id,
            };
            if (!id) {
                const res = await nextApi.getInventoryList(params);
                this.tableOption.tableData = res.data?.rows || [];
                this.tableOption.pagination.total = res.data?.total || 0;
                this.tableOption.loading = false;
                return;
            }
            const res = await nextApi.getInventoryList(params);
            this.modalOption.incomingRecordTableOption.tableData = res.data?.enterRecords || [];
            this.modalOption.outPutsRecordTableOption.tableData = res.data?.outRecords || [];
            this.modalOption.formData.materialCode = res.data?.materialCode;
            this.modalOption.formData.varietyName = res.data?.varietyName;
            this.modalOption.formData.warehouse = res.data?.warehouse;
            this.modalOption.formData.basinymLatin = res.data?.basinymLatin;
            this.tableOption.loading = false;
        },
        pageChange(page, pageSize) {
            this.tableOption.pagination.current = page;
            this.getTableData();
        },
        detailView(params) {
            console.log(params);
            this.modalOption.visible = true;
            this.getTableData(params.id);
            this.modalOption.formData.unit = params.unit;
            this.modalOption.formData.enterStorageNum = params.enterStorageNum;
            this.modalOption.formData.residueNum = params.residueNum;
        },
    },
};
</script>
<style scoped lang="scss">
@import "@/assets/common/commonStyle.scss";
.container {
    padding: 20px;
    .tool-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            padding-left: 10px;
            font-size: 18px;
        }
        button {
            margin-left: 10px;
        }
    }
    .table {
        margin-top: 20px;
    }
}
.info-box {
    padding: 10px;
    border: 1px solid rgba(70, 70, 70, 0.11);
}
.item-box {
    margin: 20px 0;
}
</style>
